<template>
	<view class="merCoupon-box" :class="genre == 4? 'pay-bg-color' : genre == 5 ? 'mem-bg-color' :''" v-cloak>
		<view :class="genre == 3 ? 'content': genre == 5 ? 'content-mem': genre == 4 ? 'content-pay':'' ">
			<view class="title-box">
				<view class="t1" :class="genre == 4? 'pay-color' :genre == 5 ? 'mem-color':''" v-if="genre != 5">
					{{pageTitle}}
				</view>
				<view class="t1" :class="genre == 5 ? 'mem-color':''" v-if="genre == 5">{{data.coupon_name}}</view>
				<view class="t2" style="margin: 10rpx 0;" v-if="genre==3 && data.discount_amount ">
					￥{{data.discount_amount}}</view>
				<view class="t2" style="margin: 10rpx 0;" v-if="genre==4 && data.coupon_amount">￥{{data.coupon_amount}}
				</view>
				<view class="t2" style="margin: 10rpx 0;" v-if="genre==5 && data.discount_amount">
					￥{{data.discount_amount}}</view>
				<view class="t3" v-if="genre !=5 && data.transaction_minimum  ">满{{data.transaction_minimum}}可用</view>
				<view class="t3" v-if="genre ==5 && data.consumption_threshold">满{{data.consumption_threshold}}可用</view>
			</view>
			<!-- 条形码 -->
			<view class="bar-box" v-if="type==2&&genre==3">
				<view class="bar">
					<!-- <canvas canvas-id="barcode"></canvas> -->
					<w-barcode :options="barCodeoptions"></w-barcode>
				</view>
				<view class="t3 col2">{{data.coupon_code}}</view>
			</view>
			<!-- 商家券 -->
			<view v-else-if='genre==3' class='btn-box'>
				<block
					v-if="(service_status == 2 && data.user_type == 2) || (data.user_type == 1 && data.type == 2  && ordinary_status  == 1)">
					<view class="btn1" @tap="showAccount(data.user_type)">领取</view>
				</block>
				<block v-else>
					<send-coupon @customevent="getcoupons" :send_coupon_params="send_coupon_param" :sign="sign"
						:send_coupon_merchant="send_coupon_merchant">
						<!-- 内部为自定义代码，按钮点击部分的代码写在这里 -->
						<!-- [[以下为示例代码 -->
						<view class="btn1" v-if="type == 1">领取</view>
						<view class="btn1 bgc" v-if="type == 2" style="color: #999">已领取</view>
						<!-- 以上为示例代码 ]] -->
					</send-coupon>
				</block>
				<button class="btn2" open-type="share" hover-class='none'>分享</button>
			</view>

			<!-- 未领取代金券展示 已领取的不展示 -->
			<view v-else-if='genre==4&&type == 1' class='btn-box'>
				<block
					v-if="(service_status == 2 && data.user_type == 2) || (data.user_type == 1 && data.type == 2  && ordinary_status  == 1)">
					<view class="btn1 pay-bg-color" @tap="showAccount(data.user_type)">领取</view>
				</block>
				<block v-else>
					<view class="btn1 pay-bg-color " v-if="type == 1" @tap="receivePayCoupon">领取</view>
					<view class="btn1 pay-bg-color bgc" v-if="type == 2" style="color: #999">已领取</view>
				</block>
				<button class="btn2 pay-share-btn" open-type="share" hover-class='none'>分享</button>
			</view>
			<!-- 商家券 -->
			<view class="coupon-info" v-if="genre == 3">
				<view class="t4" v-if="data.available_type_name">使用场景：{{data.available_type_name}}</view>
				<view class="t4" v-if="data.add_time">领取日期：{{data.add_time}}</view>
				<view class="t4" v-if="data.time">可用时段：{{data.time}}</view>
				<view class="t4" v-if="data.user_time">可用日期：{{data.user_time}}</view>
				<view class="t4" v-if="data.time_slot">可用时段：{{data.time_slot}}</view>
				<view class="t4" v-if="data.wait_days_after_receive && data.available_day_after_receive">
					可用时段：{{data.wait_days_after_receive}}{{data.available_day_after_receive}}</view>
				<view class="t4" v-if="data.week_day">可用时段：{{data.week_day}}</view>
				<view class="t4" v-if="data.goods_type_name">可用商品：{{data.goods_type_name}}</view>
				<view class="t4" v-if="data.store_type_name">可用门店：{{data.store_type_name}}</view>
			</view>
			<!-- 代金券 -->
			<view class="coupon-info" v-if="genre == 4">
				<view class="t4" v-if="data.type_name">使用场景：{{data.type_name}}</view>
				<view class="t4" v-if="data.add_time">领取日期：{{data.add_time}}</view>
				<view class="t4" v-if="data.time">可用时段：{{data.time}}</view>
				<view class="t4" v-if="data.valid_time_type !=0">可用日期：{{data.user_time}}</view>
				<view class="t4" v-if="data.coupon_type_name">可用商品：{{data.coupon_type_name}}</view>
			</view>
			<!-- 会员优惠券 -->
			<view class="coupon-info" v-if="genre == 5">
				<view class="t4" v-if="data.store_type">可用门店：{{data.store_type}}</view>
				<view class="t4" v-if="data.appoint_type_name">可用商品：{{data.appoint_type_name}}</view>
				<view class="t4" v-if="data.validity_time">有效日期：{{data.validity_time}}</view>
				<view class="t4" v-if="data.detailmsg">使用说明：{{data.detailmsg}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/store/index.js';
	var app = getApp().globalData;
	var wxbarcode = require("../../../utils/index.js");

	export default {
		data() {
			return {
				id: "", //商品/代金券ID
				data: {
					discount_amount: "",
					transaction_minimum: "",
					available_type_name: "",
					add_time: "",
					wait_days_after_receive: "",
					user_time: '',
					time: '',
					goods_type_name: '',
					time_slot: "",
					available_day_after_receive: "",
					week_day: '',
				},

				type: '', //1 未 2已领取
				// isget: '', //1 未领取 2已领取
				send_coupon_param: [],
				sign: '',
				send_coupon_merchant: '',
				service_status: "", //是否要跳转公众号判断
				ordinary_status: "", //是否要跳转公众号判断
				webURL: "",
				pageTitle: "微信商家券",
				genre: '', //券的类型 3商家券  4代金券 5会员优惠券
				barCodeoptions: {
					width: 560,
					height: 190,
					code: ''
				},

			}
		},
		onLoad(options) {
			// #ifdef MP-ALIPAY
			if (JSON.stringify(options) == '{}') {
				options = my.getLaunchOptionsSync().query;
			}
			// #endif
			console.log('页面参数options', options)
			this.id = options.id ? options.id : '';
			this.type = options.type;

			options.genre ? this.genre = options.genre : '';
			if (this.genre == 4) {
				uni.setNavigationBarTitle({
					title: '微信代金券详情'
				})
				this.pageTitle = '微信代金券'
			} else if (this.genre == 5) {
				uni.setNavigationBarTitle({
					title: '会员优惠券详情'
				})
				this.pageTitle = '会员优惠券'
			}
		},
		onShow: async function() {
			await this.$onLaunched;
			if (!getApp().globalData.loginState()) {
				getApp().globalData.toMyLogin('/pages/index/merCouponDetail/merCouponDetail?id=' + this.id + '&type=' +
					this.type + '&genre=' + this.genre)
			} else {
				this.getServicePermissions();
				if (this.genre == 3) {
					this.getCouponInfo();
				} else if (this.genre == 4) {
					this.getPayCouponInfo();
				} else if (this.genre == 5) {
					this.getMemCouponInfo();
				}
			}
		},
		onShareAppMessage(res) {
			let _this = this;
			let store_id = this.$store.store_id;
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log("res.target", res.target)

			}
			return {
				title: '商家券',
				path: '/pages/index/merCouponDetail/merCouponDetail?id=' + _this.id + '&type=' + _this.type +
					'&store_id=' + store_id +
					"&genre=" + _this.genre + '&share_uid=' + getApp().globalData.XcxData.userInfo.uid,

			}
		},
		methods: {
			//是否通过服务商公众号获取到用户openid
			getServicePermissions() {
				let _this = this;
				getApp().globalData.sendRequest({
					url: "/My/getServiceOpenid",
					data: {},
					success: res => {
						if (res.status == 1) {
							// _this.shop_coupon_service = res.data.shop_coupon_service
							_this.service_status = res.data.service_status;
							_this.ordinary_status = res.data.ordinary_status
						}
					}
				})
			},
			//商家券券信息
			getCouponInfo() {
				let _this = this;
				getApp().globalData.sendRequest({
					url: "/ShopCoupon/couponInfo",
					type: "POST",
					data: {
						id: _this.id
					},
					success: function(res) {
						if (res.status == 1) {
							_this.type = res.data.type
							_this.data.type = res.data.type;
							if (res.data.type == 1) {
								//未领取
								_this.data = res.data.info;
								_this.send_coupon_param = res.data.info.send_coupon_param;
								_this.sign = res.data.info.sign;
								_this.send_coupon_merchant = res.data.info.send_coupon_merchant;
								_this.webURL = res.data.web_url;
							} else {
								_this.data = res.data.shop_coupon;
								_this.webURL = res.data.web_url;
								_this.barCodeoptions.code = res.data.shop_coupon.coupon_code
								// wxbarcode.barcode('barcode', res.data.shop_coupon.coupon_code, 560, 190);
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1500
							})
						}
					}
				})
			},
			//未领取优惠券信息
			// getNotReceivedCoupon(){
			// 	let _this = this;
			// 	getApp().globalData.sendRequest({
			// 		url:"/ShopCoupon/notReceivedCouponRule",
			// 		type:"POST",
			// 		data:{id: _this.id},
			// 		success:function(res){

			// 			if(res.status == 1){
			// 				_this.data = res.data.info;							
			// 				_this.send_coupon_param = res.data.info.send_coupon_param;
			// 				_this.sign = res.data.info.sign;
			// 				_this.send_coupon_merchant = res.data.info.send_coupon_merchant
			// 				_this.data.isget = _this.isget;
			// 				_this.webURL = res.data.web_url;
			// 			}else{
			// 				uni.showToast({
			// 					title:res.msg,
			// 					icon:'none',
			// 					duration:1500
			// 				})
			// 			}
			// 		}
			// 	})
			// },
			//获取微信代金券详情
			getPayCouponInfo() {
				let _this = this;
				getApp().globalData.sendRequest({
					url: "/PayCoupon/couponInfo",
					type: "POST",
					data: {
						id: _this.id
					},
					success: function(res) {
						if (res.status == 1) {
							_this.data = res.data.info;
							_this.type = res.data.type; //1 未领取 2 已领取
							_this.webURL = res.data.web_url;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1500
							})
						}
					}
				})
			},
			//领取代金券
			receivePayCoupon() {
				let _this = this;
				getApp().globalData.sendRequest({
					url: "/PayCoupon/receiveCoupon",
					type: "POST",
					data: {
						id: _this.id
					},
					success: function(res) {

						if (res.status == 1) {
							uni.showToast({
								title: '领取成功',
								icon: 'success',
								duration: 2000
							})
							_this.type = 2
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							})
							_this.type = 1
						}
					}
				})
			},
			//商家券点击领取后回调函数			
			getcoupons(params) {
				let _this = this;
				console.log('params=', params)
				if (params.detail.send_coupon_result[0].code == "SUCCESS") {
					console.log('code == "SUCCESS"', params.detail.send_coupon_result[0].code)
					getApp().globalData.sendRequest({
						url: '/ShopCoupon/receiveCouponCallback',
						type: "post",
						data: {
							coupon_id: _this.id,
							stock_id: params.detail.send_coupon_result[0].stock_id,
							coupon_code: params.detail.send_coupon_result[0].coupon_code,
						},
						success: function(res) {
							uni.showToast({
								title: params.detail.send_coupon_result[0].message,
								duration: 2000
							});
						}
					});
					_this.getCouponInfo()
				} else {
					console.log('code == "fail"', params.detail.send_coupon_result[0].code)
					uni.showToast({
						title: params.detail.send_coupon_result[0].message,
						icon: 'none',
						duration: 2000
					});
					_this.getCouponInfo()
				}
			},
			//获取会员优惠券券详情
			getMemCouponInfo() {
				let _this = this;
				getApp().globalData.sendRequest({
					url: "/Coupon/getCouponInfo",
					type: "POST",
					data: {
						id: _this.id
					},
					success: function(res) {
						if (res.status == 1) {
							_this.data = res.data;
							// _this.type = res.data.type; 
							// _this.webURL = res.data.web_url;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1500
							})
						}
					}
				})
			},
			//跳转公众号
			showAccount(type) {
				// + '&xcx_id=1' + 
				let userInfo = uni.getStorageSync('userInfo');
				let uid = userInfo.uid;
				let backPage = getCurrentPages();
				let page = (backPage[backPage.length - 1]).route
				uni.navigateTo({
					url: '../web/web?url=' + this.webURL + '&uid=' + uid + '&page=' + page + '&user_type=' + type
				})
			},
		}
	}
</script>

<style>
	[v-cloak] {
		display: none
	}

	page {
		background: #00C882;
		overflow: hidden;
	}

	.merCoupon-box {
		width: 100%;
		height: 100vh;
		background: #00C882;
		box-sizing: border-box;
		padding: 20rpx 30rpx 142rpx;
	}

	.content {
		width: 100%;
		height: 100%;
		background: #fff;
		position: relative;
		border-radius: 2px;
		overflow: hidden;
		box-sizing: border-box;
		padding: 30rpx;

	}

	.content:before,
	.content:after {
		content: '';
		display: block;
		width: 100%;
		height: 0rpx;

		position: absolute;
		left: 8PX;

	}

	.content:before {
		border-bottom: 8px dotted #00C882;
		top: -4px;
		/* 半圆，只显示一个repeat的一半 */

	}

	.content:after {
		border-top: 8px dotted #00C882;
		bottom: -4px;
	}

	.content-mem {
		width: 100%;
		height: 100%;
		background: #fff;
		position: relative;
		border-radius: 2px;
		overflow: hidden;
		box-sizing: border-box;
		padding: 30rpx;

	}

	.content-mem:before,
	.content-mem:after {
		content: '';
		display: block;
		width: 100%;
		height: 0rpx;
		position: absolute;
		left: 8PX;

	}

	.content-mem:before {
		border-bottom: 8px dotted #eea95f;
		top: -4px;
		/* 半圆，只显示一个repeat的一半 */

	}

	.content-mem:after {
		border-top: 8px dotted #eea95f;
		bottom: -4px;
	}

	.content-pay {
		width: 100%;
		height: 100%;
		background: #fff;
		position: relative;
		border-radius: 2px;
		overflow: hidden;
		box-sizing: border-box;
		padding: 30rpx;

	}

	.content-pay:before,
	.content-pay:after {
		content: '';
		display: block;
		width: 100%;
		height: 0rpx;
		position: absolute;
		left: 8PX;

	}

	.content-pay:before {
		border-bottom: 8px dotted #23d2c8;
		top: -4px;
		/* 半圆，只显示一个repeat的一半 */

	}

	.content-pay:after {
		border-top: 8px dotted #23d2c8;
		bottom: -4px;
	}

	.title-box {
		width: 100%;
		height: 260rpx;
		text-align: center;
		padding-top: 20rpx;

	}

	.t1 {
		font-size: 40rpx;
		font-weight: 500;
		color: #00C882;
	}

	.t2 {
		font-size: 70rpx;
		font-weight: 500;
		color: #FF3E3E;
	}

	.t3 {
		font-size: 28rpx;
		font-weight: 400;
		color: #040000;
	}

	.t4 {
		font-size: 24rpx;
		font-weight: 400;
		color: #666;
		line-height: 46rpx;
	}

	.col2 {
		color: #343434;
		margin-top: 10rpx;
		text-align: center;
	}

	.bar-box {
		width: 100%;
		border-top: 1px solid #eee;
		box-sizing: border-box;
		padding: 30rpx 0;
	}

	.bar {
		width: 560rpx;
		height: 190rpx;
		/* 	border: 1px solid #999; */
		margin: 0 auto;

	}

	.coupon-info {
		width: 100%;
		padding-top: 40rpx;
		border-top: 1px solid #eee;

	}

	.btn-box {
		width: 450rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;


	}

	.btn1 {
		width: 200rpx;
		height: 60rpx;
		background: #00C882;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		line-height: 60rpx;
	}

	.btn2 {
		width: 200rpx;
		height: 60rpx;
		border: 1px solid #00C882;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #00C882;
		text-align: center;
		line-height: 60rpx;
		background-color: #fff;
	}

	.bgc {
		background-color: #fff;
		border: 1px solid #eee;
		color: #eee;
	}

	.pay-color {
		color: #23d2c8;
	}

	.pay-bg-color {
		background-color: #23d2c8;
	}

	.pay-share-btn {
		color: #23d2c8;
		border: 1px solid #23d2c8;
	}

	.mem-bg-color {
		background-color: #eea95f;
	}

	.mem-color {
		color: #eea95f;
	}

	.mem-share-btn {
		color: #eea95f;
		border: 1px solid #eea95f;
	}
</style>
